<template>
	<view class="page bg-w">
		<view class="pl30  bg-w box-shadow-bottom unio2o-nav-body">
			<scroll-view class="unio2o-nav"  scroll-x="true">
				
				<view v-for="(item,index) in types" :key="index" :data-index="index"  @click="scrollSelect"  :class="{'on':selectIndex == index}" class="item">
					<view class="pt20">{{item}}</view>
					<view class="bg-main"></view>
				</view>
				
			</scroll-view>
		</view>
		<scroll-view v-if="isEmpty == false" class="order-main" scroll-y="true">
			<view class="pd30">
				
				<view class="mb30">
					<unio2o-tuan-order-item></unio2o-tuan-order-item>
				</view>
				<view class="mb30">
					<unio2o-tuan-order-item :status="1" :orderType="1"></unio2o-tuan-order-item>
				</view>
				<view class="mb30">
					<unio2o-tuan-order-item :status="4"></unio2o-tuan-order-item>
				</view>
				<view class="mb30">
					<unio2o-tuan-order-item :status="1" :refund="true"></unio2o-tuan-order-item>
				</view>
				<view class="mb30">
					<unio2o-tuan-order-item :status="1" :refund="true" :refundStatus="1"></unio2o-tuan-order-item>
				</view>
				<view class="mb30">
					<unio2o-tuan-order-item :status="1" :refund="true" :refundStatus="2"></unio2o-tuan-order-item>
				</view>
				<view class="mb30">
					<unio2o-tuan-order-item :status="8"></unio2o-tuan-order-item>
				</view>
				<view class="mb30">
					<unio2o-tuan-order-item :status="8" :isComment="true"></unio2o-tuan-order-item>
				</view>
			</view>
		</scroll-view>
		<view v-if="isEmpty"  class="unio2o-order-empty bg-w">
			<view class="flex center">
				<image  :src="''"></image>
			</view>
			<view class="text-center mt30 ft14 text-notice">暂无订单</view>
		</view>
	</view>
</template>

<script>
	import unio2oTuanOrderItem from '@/components/module/tuan/order/item.vue';
	export default{
		components:{
			unio2oTuanOrderItem
		},
		data(){
			return {
				selectIndex:0,
				isEmpty:false,
			types:[
				'全部',
				'待支付',
				'待核销',
				'待评价',
				'已完成',
				'退款单',
				'分销订单'
			],
			}
		},
		methods:{
			scrollSelect(e){
				this.selectIndex = e.currentTarget.dataset.index;
			}
		}
	}
</script>

<style>
	.unio2o-order-empty{
		height: calc(100vh - 100rpx);
		padding-top: 200rpx;
	}
	.unio2o-order-empty image{
		width: 240rpx;
		height: 240rpx;
	}
	.order-main{
		height: calc(100vh - 100rpx);
	}
</style>